import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { HashRouter, Match, Miss, Link } from 'react-router'
import { getGlobalDispatcher, ComponentProps, ComponentState, Component } from 'react-channel'

export class Message extends Component<ComponentProps, ComponentState> {
  public render() {
    return (
      <div>
        <h3>Title</h3>
        <p>Content</p>
        <Link to="/message/edit">Edit</Link> <span />
        <a href="/message/del">Del</a>
      </div>
    )
  }
}

export class MessageNew extends Component<ComponentProps, ComponentState> {
  constructor(props: ComponentProps) {
    super(props)
  }

  public render() {
    return (
      <form className="editor" action="/">
        <input placeholder="enter message title ..." name="messageTitle" />
        <br /><br />
        <textarea placeholder="enter message content ..." 
                  name="messageContent" rows={10} cols={100}></textarea>
        <br /><br />
        <button>OK</button>
      </form>
    )
  }
}

export class MessageEdit extends Component<ComponentProps, ComponentState> {
  constructor(props: ComponentProps) {
    super(props)
  }

  public render() {
    return (
      <form className="editor" action="/">
        <input placeholder="enter message title ..." name="messageTitle" />
        <br /><br />
        <textarea placeholder="enter message content ..." 
                  name="messageContent" rows={10} cols={100}></textarea>
        <br /><br />
        <button>OK</button>
      </form>
    )
  }
}